<template>
  <div class="fp-wrap">
    <div class="card">
      <h2 class="title">忘记密码</h2>

      <!-- 找回方式 -->
      <div class="method">
        <label class="radio">
          <input type="radio" value="phone" v-model="method" />
          <span>手机号找回</span>
        </label>
        <label class="radio">
          <input type="radio" value="email" v-model="method" />
          <span>身份证找回</span>
        </label>
      </div>

      <!-- 手机号找回 -->
      <div v-if="method === 'phone'" class="form">
        <div class="input-row">
          <span class="prefix">+86</span>
          <input
              class="input"
              type="tel"
              placeholder="请输入手机号"
              v-model="phone"
          />
        </div>

        <div class="input-row">
          <input
              class="input"
              type="text"
              placeholder="请输入短信验证码"
              v-model="smsCode"
          />
          <button
              class="btn ghost"
              :disabled="countdown > 0 || !validPhone"
              @click="sendSms"
          >
            {{ countdown > 0 ? `${countdown}s` : '获取短信验证码' }}
          </button>
        </div>

        <button class="btn primary block" @click="recoverByPhone">
          找回密码
        </button>
      </div>

      <!-- 身份证找回 -->
      <div v-else class="form">
        <div class="input-row">
          <input
              class="input full"
              type="email"
              placeholder="请输入账号"
              v-model="email"
          />
        </div>
        <div class="input-row">
          <input
              class="input"
              type="text"
              placeholder="请输入身份证账号后六位"
              v-model="mailCode"
          />
        </div>

        <button class="btn primary block" @click="recoverByEmail">
          找回密码
        </button>
      </div>

      <div class="footer">
        记起密码？<router-link to="login">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const method = ref('phone') // phone | email
const phone = ref('')
const smsCode = ref('')
const email = ref('')
const mailCode = ref('')
const countdown = ref(0)
let timer = null

const validPhone = computed(() => /^1\d{10}$/.test(phone.value))
const validEmail = computed(() =>
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)
)

const startCountdown = () => {
  countdown.value = 60
  clearInterval(timer)
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) clearInterval(timer)
  }, 1000)
}

const sendSms = () => {
  if (!validPhone.value) return alert('请输入正确的手机号')
  // TODO: 请求短信接口
  console.log('发送短信到: ', phone.value)
  startCountdown()
}

const sendMailCode = () => {
  if (!validEmail.value) return alert('请输入正确的邮箱')
  // TODO: 请求邮件验证码接口
  console.log('发送邮箱验证码到: ', email.value)
  startCountdown()
}

const recoverByPhone = () => {
  if (!validPhone.value || !smsCode.value) return alert('请填写完整信息')
  // TODO: 提交找回请求
  console.log('手机号找回: ', { phone: phone.value, code: smsCode.value })
}

const recoverByEmail = () => {
  if (!validEmail.value || !mailCode.value) return alert('请填写完整信息')
  // TODO: 提交找回请求
  console.log('邮箱找回: ', { email: email.value, code: mailCode.value })
}

const toLogin = () => {
  // TODO: 跳转登录路由
  console.log('去登录页')
}
</script>

<style scoped>
/* 背景 */
.fp-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
      radial-gradient(600px 300px at 85% 10%, rgba(132, 101, 255, 0.08), transparent 60%),
      radial-gradient(500px 260px at 10% 90%, rgba(132, 101, 255, 0.06), transparent 60%),
      #eef3ff;
  padding: 40px 16px;
}

/* 卡片 */
.card {
  width: 560px;
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(29, 33, 41, 0.06);
  padding: 40px 56px 28px;
}

.title {
  margin: 0 0 18px;
  text-align: center;
  font-size: 22px;
  color: #2b2f36;
  font-weight: 700;
}

/* 找回方式单选 */
.method {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-bottom: 24px;
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}

.radio input[type="radio"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid #a78bfa;
  border-radius: 50%;
  position: relative;
}

.radio input[type="radio"]:checked {
  border-color: #8b5cf6;
}

.radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: #8b5cf6;
  border-radius: 50%;
}

/* 表单 */
.form {
  margin-top: 4px;
}

.input-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}

.prefix {
  background: #f6f7fb;
  border: 1px solid #e6e7ef;
  border-right: none;
  color: #6366f1;
  border-radius: 10px 0 0 10px;
  padding: 12px 16px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e6e7ef;
  background: #fff;
  border-radius: 10px;
  outline: none;
  color: #1f2937;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.input.full {
  width: 100%;
}

.input:focus {
  border-color: #c7b8ff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
}

.btn.block {
  width: 100%;
}

.btn.primary {
  background: #a78bfa;
  color: #fff;
  margin-top: 6px;
}

.btn.primary:hover { background: #946ef9; }

.btn.ghost {
  background: #f8f9ff;
  color: #4b5563;
  border-color: #e6e7ef;
  white-space: nowrap;
}

.btn.ghost:disabled {
  background: #f1f2f6;
  color: #9aa2b1;
  cursor: not-allowed;
}

/* 底部 */
.footer {
  text-align: center;
  margin-top: 18px;
  color: #6b7280;
  font-size: 14px;
}

.footer a {
  color: #8b5cf6;
  text-decoration: none;
  margin-left: 6px;
}

.footer a:hover { text-decoration: underline; }

/* 响应式 */
@media (max-width: 640px) {
  .card { padding: 28px 18px 22px; }
  .input-row { gap: 8px; }
  .prefix { padding: 10px 12px; }
}
</style>